<script lang="jsx">
export default {
  name: "Home",
  components: {
    // 引入组件
  },
  data() {
    return {
      // 定义数据
      count: 0,
      array: [1, 2, 3, 4, 5],
    };
  },
  methods: {
    // 定义方法
  },
  created() {
    // 在组件创建时执行的逻辑
  },
  mounted() {
    // 在组件挂载完成后执行的逻辑
  },
  render() {
    return (
      <div class="app-container">
        <div class="content">
          <div>
            1. 按钮
            <el-button onClick={() => this.increase()}> + </el-button>
            {this.count}
            <el-button onClick={() => this.decrease()}> - </el-button>
          </div>
          <el-divider />
          2. 循环
          <el-button type="primary" onClick={() => this.array.push(this.array.length + 1)}>
            +
          </el-button>
          <div>
            {this.array.map((item, index) => (
              <div class="block-item" key={index}>
                {item}
              </div>
            ))}
          </div>
          3. 条件
          <el-divider />
          <div>{this.count > 0 ? <h3> count > 0 条件成立</h3> : null}</div>

          4. 插槽
          <el-divider />
          <div>
            <slot name="slot1">
              <div>
                <h3> 插槽内容1 </h3>
              </div>
            </slot>
          </div>

          
        </div>
      </div>
    );
  },
  methods: {
    increase() {
      this.count++;
    },
    decrease() {
      this.count--;
    },
  },
};
// "@vue/babel-plugin-jsx": "^1.4.0",
//
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  .content {
    width: 600px;
    padding: 20px;

    height: 100%;
    margin: 0 auto;
    background-color: #f0f0f022;
    border: 1px solid #ccc;
    .block-item {
      width: 40px;
      height: 40px;
      margin: 4px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      display: inline-block;
      cursor: pointer;
      border-radius: 4px;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
